<template>
  <!--  顶部导航 start-->
  <TopNav title="登录"/>
  <!--  顶部导航 end-->
  <!--  选择 start-->
<!--  <div class="choice">-->
<!--    <p @click="loginShow=true">账号密码登录</p>-->
<!--    <p @click="loginShow=false">短信验证码登录</p>-->
<!--  </div>-->
  <!--   选择 end-->
  <!--  账号密码登录 start-->
  <div class="form" v-show="loginShow">
    <el-input v-model="loginForm.username" class="input" placeholder="用户名"></el-input>
    <el-input v-model="loginForm.password" class="input" placeholder="密码"></el-input>
    <div class="agreement">
      <el-switch class="radio" v-model="radio"/>
      <h1>我已阅读并同意<span>《用户协议》</span>和<span>《隐私协议》</span></h1>
    </div>
    <el-button @click="submitLoginPwd" class="button" color="#3ddadd">登录</el-button>
  </div>
  <!--  账号密码登录 end-->
  <!--  短信验证码登录 start-->
  <div class="form" v-show="!loginShow">
    <el-input class="input" placeholder="请输入手机号">
      <template #append>
        <el-button>获取验证码</el-button>
      </template>
    </el-input>
    <el-input class="input" placeholder="请输入验证码"></el-input>
    <div class="agreement">
      <el-switch class="radio" v-model="radio"/>
      <h1>我已阅读并同意<span>《用户协议》</span>和<span>《隐私协议》</span></h1>
    </div>
    <el-button class="button" color="#3ddadd">登录</el-button>
  </div>
  <!--  短信验证码登录 end-->
  <!--  注册和忘记密码 start-->
  <div class="forget">
    <p @click="router.push('/home/register')">注册</p>
    <hr>
    <p>忘记密码</p>
  </div>
  <!--  注册和忘记密码 end-->
</template>

<script setup>
import userAxios from "@/api/user.js";
import {reactive, ref} from "vue";
import {useRouter} from 'vue-router'
import {useDataStore} from "@/stores/dataStore"
import TopNav from "@/components/TopNav/Index.vue"
const dataStore = useDataStore()
const router = useRouter()
const onClickLeft = () => history.back();
const radio = ref(true)
//登录模式
const loginShow = ref(true)
//登录表单
const loginForm = reactive({
  username: '',
  password: '',
  phone: '',
  code: ''
})
/**
 * 账号密码登录
 */
const submitLoginPwd = () => {
  userAxios.user_loginPassword({
    username: loginForm.username,
    password: loginForm.password
  }).then(res => {
    console.log(res.data)
    if (res.data.code == 200) {
      dataStore.isLogin = true//用户登录为true
      dataStore.token = res.data.data//存入token
      // userAxios.user_getUserByToken({
      //   token: res.data.data
      // }).then(res => {
      userAxios.user_findByUserName({
        username: loginForm.username,
      }).then(res => {
        console.log(res.data.data)
        dataStore.userId = res.data.data.userId
        dataStore.userImg = res.data.data.userImg
        dataStore.nickname = res.data.data.nickname
      })
      router.push("/")
    } else {
      ElMessage.error(res.data.message)
    }
  })

}
</script>

<style scoped lang="scss">
.choice {
  display: flex;
  background-color: #ffffff;
  padding: 10px;

  p {
    margin-left: 30px;
    margin-right: 30px;
    font-size: 15px;
    font-weight: bolder;
  }

  p:hover {
    color: #017f95;
  }
}

.form {
  margin-top: 2px;
  background-color: #ffffff;

  .input {
    margin: 3%;
    width: 94%;
    height: 40px;
  }

  .button {
    margin-top: 20px;
    margin-bottom: 20px;
    margin-left: 3%;
    width: 94%;
    height: 40px;
    color: #ffffff;
  }

}

.agreement {
  display: flex;
  padding-left: 5%;

  .radio {
    margin-right: 10px;

  }

  h1 {
    margin-top: 5px;

    span {
      color: #2d8497;
    }
  }
}

.forget {
  background-color: #ffffff;
  display: flex;
  padding-left: 35%;
  padding-right: 35%;
  padding-bottom: 500px;

  hr {
    height: 13px;
  }

  p {
    color: #2d8497;
    font-size: 15px;
  }
}
</style>
